<template>
  <div class="wrap">
    <div class="wrap-button">
      <a-button style="margin-right: 8px" type="primary" @click="showAddRole">新增</a-button>
    </div>
    <div class="wrap-table">
      <!-- <BaseTitle title="用户列表" /> -->
      <a-table
        :loading="loading"
        :dataSource="data"
        :columns="columns"
        size="middle"
        @change="handleTableChange"
        width="300"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <a-button
              class="button-interval"
              type="link"
              :icon="h(SettingOutlined)"
              @click="showPermission(record)"
              size="small"
            >
              授权
            </a-button>
            <a-button
              class="button-interval"
              type="link"
              :icon="h(DeleteOutlined)"
              size="small"
              @click="handleDelete(record)"
            >
              删除
            </a-button>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { RoleInfo } from '/@/api/sys/model/roleModel'
  const loading = ref(false)

  const columns = [
    {
      title: '资产名称',
      dataIndex: 'assetName',
      key: 'assetName',
      align: 'center',
    },
    {
      title: '资产EPC',
      dataIndex: 'epc',
      key: 'epc',
      align: 'center',
    },
    {
      title: '客户名称',
      key: 'clientName',
      fixed: 'clientName',
      align: 'center',
    },
    {
      title: '资产状态',
      dataIndex: 'assetStatus',
      key: 'assetStatus',
      align: 'center',
    },
  ]

  let data = ref<RoleInfo[]>([])
</script>
<style lang="scss" scoped>
  .wrap {
    &-table {
      margin-top: 16px;
    }
  }
</style>
